<#include "include/macro-head.ftl">
<!doctype html>
<html lang="en">
<head>
<@head></@head>
    <title>作品名称</title>
</head>
<body>
<#include "include/main-nav.ftl">
<div class="container-fluid" style="margin-bottom: 30px;margin-top: 20px">
    <div class="row">
        <div class="col-md-offset-1 col-md-9 work-detail">
            <div class="work-detail-top">
            <#list work.tags as tag>
                <a class="label  label-default">${tag}</a>
            </#list>
                <h3>${work.name}</h3>
                <div class="work-author">
                    <a href="${server}/member/${work.author.username}/works" class="work-author-img"><img
                            src="${work.author.img}"></a>
                    <ul>
                        <li>${work.commentNumber} 回帖 • ${work.overNumber} 浏览 • ${work.ago}</li>
                        <li><a href="${server}/member/${work.author.username}/works">${work.author.username}</a></li>
                    </ul>
                </div>
            </div>
            <div class="work-detail-content">
                <input type="hidden" id="wid" value="${work.wid}">
                <div id="work-info"></div>
                <ul class="work-operate pull-right">
                    <li>
                        <span class="glyphicon glyphicon-eye-open"></span>浏览&nbsp;${work.overNumber}
                    </li>
                    <li <#if (workOperateStatus?? && workOperateStatus.recommend == "true")>
                            class="add-red-color" </#if>>
                        <span class="glyphicon glyphicon-thumbs-up"></span>
                        <a href="#" id="recommend">推荐&nbsp;${work.recommendNumber}</a>
                    </li>
                    <li <#if (workOperateStatus?? && workOperateStatus.collection == "true")>
                            class="add-red-color" </#if>>
                        <span class="glyphicon glyphicon-star-empty"></span>
                        <a href="#" id="collection">收藏&nbsp;${work.collectionNumber}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-1 col-md-9 work-comments">
            <div class="work-comments-title">
            ${listComments?size}回复
            </div>
            <div class="work-comments-content">
            <#list listComments as comment>
                <div class="work-comments-content-one">
                    <table>
                        <tr>
                            <td>
                                <img class="work-comments-content-one-author-img" src="${comment.user.img}">
                            </td>
                            <td>
                                <a href="#" class="work-content-author">${comment.user.username}</a>
                                <span class="work-content-time">${comment.ago}</span>
                                <div class="work-content-info">
                                    <p>${comment.info}</p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </#list>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-offset-1 col-md-9 work-write">
            <h5>添加一条回复</h5>
            <textarea class="form-control" id="comment-content"></textarea>
            <button class="btn btn-default" id="commit-comment">回复</button>
        </div>
    </div>
</div>
<div id="originContent" style="display: none">${work.info}</div>
<#include "include/main-footer.ftl">
<script src="${server}/js/jquery.min.js"></script>
<script src="${server}/js/marked.min.js"></script>
<script src="${server}/js/cyzx.js"></script>
<script>
    $(document).ready(function () {
        $('#work-info').html(marked($('#originContent').text()));
    });
</script>
</body>
</html>
